* {
  margin: 0;
  padding: 0;
}

html,
body,
#app,
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #002555;
}


.wrapper {
  overflow: hidden;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
}

a {
  text-decoration: none;
  color: #0ce4d3;
}

a:hover {
  color: #fff;
}

.el-button {
  margin-top: 5px;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgba(255, 255, 255, 0.2) !important;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(255, 255, 255, 0.2) !important;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgba(255, 255, 255, 0.2) !important;
}

.header {
  background-color: #003d98;
}

.login-wrap {
  background: #002555;
}

.plugins-tips {
  background: #eef1f6;
}

.plugins-tips a {
  color: #20a0ff;
}

.el-upload--text em {
  color: #20a0ff;
}

.pure-button {
  background: #20a0ff;
}

.tags-li.active {
  border: 1px solid #409eff;
  background-color: #409eff;
}

.message-title {
  color: #20a0ff;
}

.collapse-btn:hover {
  background: rgb(40, 52, 70);
}

.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 50px;
  bottom: 0;
  /* padding-bottom: 30px; */
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.content {
  width: auto;
  height: 100%;
  padding: 20px;
  overflow-y: scroll;
  box-sizing: border-box;
}

.content-collapse {
  left: 65px;
}

.container {
  padding: 15px;
  margin-bottom: 20px;
  color: #f7f7f7;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.container-search {
  padding: 20px 10px 10px;
  margin-bottom: 20px;
  color: #f7f7f7;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.crumbs {
  position: absolute;
  top: -32px;
  left: 80px;
}

.content-foot {
  position: absolute;
  bottom: 15px;
  left: -200px;
  right: 0;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
}

.el-table th {
    background-color: #173f73  !important;
    color: #ffffff !important;
}
.el-table--border td, .el-table--border th {
    padding-left: 5px;
}

.el-table td,
.el-table th.is-leaf {
    border-bottom: 1px solid #173f73 !important;
}
.el-table--border {
    border: 1px solid #173f73;
}
.el-table--border td, .el-table--border th {
    border-right: 1px solid #173f73;
}

.pagination {
  margin: 20px 0;
  text-align: right;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.plugins-tips {
  padding: 20px 10px;
  margin-bottom: 20px;
  background: #000 !important;
}

.el-button + .el-tooltip {
  margin-left: 10px;
}

.el-input__inner,
.el-checkbox__inner,
.el-textarea__inner {
  /* background-color: #36505d !important; */
  border: none !important;
}

/* .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #50a1d8 !important;
    border-color: #50a1d8 !important;
} */

/* .el-switch__core,
.el-radio__inner,
.el-textarea__inner {
    background-color: #36505d !important;
} */

/* .el-switch.is-checked .el-switch__core,
.el-radio__input.is-checked .el-radio__inner {
    border-color: #50a1d8 !important;
    background-color: #50a1d8 !important;
} */

.mgb20 {
  margin-bottom: 20px;
}

.move-enter-active,
.move-leave-active {
  transition: opacity 0.5s;
}

.move-enter,
.move-leave {
  opacity: 0;
}

/*BaseForm*/
.form-box {
  width: 600px;
}

.form-box .line {
  text-align: center;
}

.el-time-panel__content::after,
.el-time-panel__content::before {
  margin-top: -7px;
}

.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
  padding-bottom: 0;
}

/*Upload*/

.pure-button {
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
}

.g-core-image-corp-container .info-aside {
  height: 45px;
}

.el-upload--text {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.el-upload--text .el-icon-upload {
  font-size: 67px;
  color: #97a8be;
  margin: 40px 0 16px;
  line-height: 50px;
}

.el-upload--text {
  color: #97a8be;
  font-size: 14px;
  text-align: center;
}

.el-upload--text em {
  font-style: normal;
}

.el-range-input {
  background: #355278 !important;
}

/*VueEditor*/

.ql-container {
  min-height: 400px;
}

.ql-snow .ql-tooltip {
  transform: translateX(117.5px) translateY(10px) !important;
}

.editor-btn {
  margin-top: 20px;
}

/*markdown*/

.v-note-wrapper .v-note-panel {
  min-height: 500px;
}

.el-button {
  color: #ffffff !important;
}

.myHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #1e477d;
  background: url(../img/icon/title.png) 5px 50% no-repeat;
}

.myHeader-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0 10px 30px;
}

.myHeader-label {
  background: #09274e;
  padding: 4px;
  border-radius: 8px;
  font-size: 14px;
  color: #115ab0;
  margin-left: 10px;
}

.myHeader-tool .el-button,
.myHeader-tool .el-select {
  margin-left: 10px;
}

.btn-ghost {
  border: 2px solid #0065dc !important;
  color: #fff !important;
  background: transparent !important;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.el-table,
.el-table__expanded-cell,
.el-table tr {
  background: transparent !important;
}

.el-form-item__label {
  color: #0075ff !important;
}

.form-value {
  color: #fff;
}

.form-help {
  color: #759bcd;
  padding-left: 16px;
}

.myTabs .el-tabs--border-card {
  background: rgba(255, 255, 255, 0.08);
}

.myTabs .el-tabs__header {
  background: #002555 !important;
  border-bottom: none !important;
}

.myTabs .el-tabs__item {
  background: #002555 !important;
  font-size: 16px;
  color: #095fc5 !important;
}

.myTabs .el-tabs__item.is-active {
  background: #143662 !important;
  color: #fff !important;
}

.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: #fff;
  padding-left: 64px;
}

.header-collapse {
  padding-left: 250px;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.3);
}

.header .logo {
  float: left;
  width: 250px;
  line-height: 50px;
}

.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 50px;
  align-items: center;
}

.user-name {
  margin-left: 10px;
  font-size: 14px;
}

.user-avator {
  margin-left: 20px;
}

.user-avator img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.btn-ghost {
  border: 2px solid #0065dc !important;
  color: #fff !important;
  background: transparent !important;
  border-radius: 10px !important;
  margin-left: 10px;
}

.web-title {
  background-color: #115ab0;
  color: #fff;
  text-align: left;
  font-weight: 700;
  height: 100px;
  padding-left: 20px;
  line-height: 50px;
  size: 20px;
}

.web-title2 {
  background-color: #115ab0;
}

.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar > ul {
  height: 100%;
}

.el-menu {
  border: none;
}

.el-submenu {
  border-top: 1px solid #1763bd;
}

.el-menu-item.is-active {
  background: url(../img/menu-bar.jpg) 30px 50% no-repeat;
}

.menu-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 10px;
}

.icon-01 {
  background: url(../img/icon/menu1.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-02 {
  background: url(../img/icon/menu2.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-03 {
  background: url(../img/icon/menu3.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-04 {
  background: url(../img/icon/menu4.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-05 {
  background: url(../img/icon/menu5.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-06 {
  background: url(../img/icon/menu6.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-07 {
  background: url(../img/icon/menu7.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.icon-08 {
  background: url(../img/icon/menu8.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #002555 url(../img/login-bg.jpg);
  background-size: 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  color: #62befe;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 30px;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 520px;
  margin: -200px 0 0 -540px;
  overflow: hidden;
  background: url(../img/login-box.png) 50% 100% no-repeat;
  background-size: auto 445px;
}

.ms-content {
  width: 250px;
  margin: 100px 0 0 418px;
  box-sizing: border-box;
}

.my-input {
  border: 1px solid #5eb6f4;
  width: 100%;
  border-radius: 6px;
  box-sizing: border-box;
  padding-left: 38px;
}

.my-input input {
  font-size: 14px;
  color: #333;
  height: 32px;
  line-height: 32px;
  background-color: transparent;
  border: none;
  width: 100%;
}

.my-input__user {
  background: #fff url(../img/icon-user.png) 6px 50% no-repeat;
  background-size: auto 28px;
}

.my-input__pw {
  background: #fff url(../img/icon-pw.png) 6px 50% no-repeat;
  background-size: auto 28px;
}

.my-input__code {
  padding-left: 10px;
  background-color: #fff;
}

.login-btn {
  display: flex;
  text-align: center;
  justify-content: center;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 12px;
}

.login-btn button {
  width: 136px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  font-size: 20px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(0, #00cfaf 0%, #00ae93 50%, #00cfaf 100%);
}

.login-btn button.btn-default {
  color: #143373 !important;
  background: linear-gradient(0, #d5d5d5, #ffffff);
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}

.container-home {
  background: none;
  padding: 0;
  width: 1500px;
}

.el-row {
  margin-bottom: 20px;
}

.box {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
}

.webcome {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 30px 20px 30px;
  padding-right: 0;
  text-align: left;
  line-height: 2;
}

.webcome__avator {
  padding-right: 10px;
  padding-top: 16px;
}

.webcome__avatorimg {
  width: 40px;
  height: 40px;
}

.webcome __tit {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}

.webcome __dd {
  font-size: 14px;
  color: #00a0fc;
}

.home-title {
  font-size: 18px;
  color: #fff;
  font-weight: 500;

  padding-left: 20px;
  margin-bottom: 14px;
}

.home-title.h01 {
  background: url(../img/icon/home1.png) 0 50% no-repeat;
}

.home-title.h02 {
  background: url(../img/icon/home2.png) 0 50% no-repeat;
}

.home-title.h03 {
  background: url(../img/icon/home3.png) 0 50% no-repeat;
}

.count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.count__label {
  font-size: 12px;
  color: #00a0fc;
  height: 46px;
  width: 102px;
  line-height: 46px;
  padding-left: 12px;
  text-align: left;
  background: url(../img/count-label.png) 0 50% no-repeat;
  box-sizing: border-box;
}

.count__value {
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.count__value span {
  padding: 4px;
  border-top: 1px solid #fff;
}

.count__value span:first-child {
  border-top: none;
}

.title-big {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 14px;
}

.title-big::after {
  content: '';
  display: block;
  flex: 1;
  height: 5px;
  background: url(../img/title-bar1.jpg) 20px 50% no-repeat;
}

.serve-box {
  display: flex;
  align-items: center;
  width: 360px;
  height: 165px;
  font-size: 14px;
  color: #fff;
  background: url(../img/serve.png) no-repeat;
}

.serve-box__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 160px;
  height: 160px;
  margin-right: 20px;
}

.serve-box__right {
  flex: 1;
}

.serve-box__value {
  font-size: 46px;
  color: #d41454;
}

.serve-box__name {
  font-size: 16px;
  font-weight: 500;
}

.serve-box__progress {
  padding-top: 16px;
  font-size: 12px;
  font-weight: 300;
  width: 90%;
  display: flex;
  align-items: center;
}

.serve-box__progress .myProgress {
  margin: 0 8px;
  flex: 1;
}

.myProgress {
  height: 3px;
}

.myProgress__inner {
  position: relative;
  height: 3px;
  width: 10%;
}

.myProgress__inner::after {
  content: '';
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translate(60%, -50%);
  right: 0;
  top: 50%;
}

/* // 绿色 */
.myProgress.default {
  background: #065a96;
}

.myProgress.default .myProgress__inner {
  background: #00a0fc;
}

.myProgress.default .myProgress__inner::after {
  background: #00a0fc;
  border: 3px solid #0a65af;
}

/* // 绿色 */
.myProgress.success {
  background: #015130;
}

.myProgress.success .myProgress__inner {
  background: #00b69a;
}

.myProgress.success .myProgress__inner::after {
  background: #00b69a;
  border: 3px solid #0a767e;
}

/* // 红色 */
.myProgress.danger {
  background: #662150;
}

.myProgress.danger .myProgress__inner {
  background: #d41454;
}

.myProgress.danger .myProgress__inner::after {
  background: #d41454;
  border: 3px solid #662150;
}

.net-box {
  display: flex;
  align-items: center;
  width: 490px;
  height: 150px;
  font-size: 16px;
  color: #fff;
}

.net-box__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 254px;
  margin-right: 20px;
  color: #338af1;
  font-size: 16px;
  line-height: 1.5;
}

.net-box__right {
  flex: 1;
  line-height: 1.8;
}

.net-box__value {
  font-size: 28px;
  color: #d41454;
  font-style: italic;
}

.net-box.success {
  background: url(../img/net-success.png) no-repeat;
}

.net-box.success .net-box__value {
  color: #00b69a;
}

.net-box.danger {
  background: url(../img/net-danger.png) no-repeat;
}

.net-box.danger .net-box__value {
  color: #d41454;
}

.home-grid {
  margin: -20px;
  display: flex;
  flex-wrap: wrap;
}

.home-grid__li {
  margin: 22px;
  text-align: center;
}

.home-grid__card {
  position: relative;
  padding: 22px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 10px;
  border-radius: 10px;
}

.home-grid__card img {
  width: 62px;
  height: 62px;
}

.home-grid__count {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  background: #f72e6a;
  font-size: 12px;
  line-height: 24px;
}

.home-grid__name {
  font-size: 16px;
  color: #fff;
}

.table-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.table-title__name {
  font-size: 18px;
  color: #fff;
}

.table-title__btn {
  background: #115ab0;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 12px;
}

.my-upload {
  position: relative;
}

.my-upload .input_file {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: red;
}


.my-upload {
  position: relative;
}

.my-upload .input_file {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: red;
}


.file {
  position: relative;
  display: inline-block;
  background: #0075ff;
  border: 1px solid #0075ff;
  border-radius: 3px;
  padding: 7px 15px;
  overflow: hidden;
  color: #FFF;
  text-decoration: none;
  text-indent: 0;
  line-height: 15px;
  font-size: 12px;
}

.file input {
  position: absolute;

  right: 0;
  top: 0;
  opacity: 0;
}

.file:hover {
  background: #0a6ee4;
  border-color: #0a6ee4;
  color: #FFF;
}


.el-dialog {
  background: #00233e;
  border: 2px solid #0d4485;
}

.field-error{
  color: red;
}

.error_con {
  text-align: center;
}